﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户交易记录</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" href="dist/excel-bootstrap-table-filter-style.css"/>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!--自定义工具-->
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<style>
    .pag_a {
        z-index: -1 !important;
    }
</style>
<body>

<!--头部-->
<top>
    <section class="seck">
        <div class="register_login">
            <em>您好，</em>
            <a href="login.html">会员登录</a>
            <a href="register.html">快速注册</a>
        </div>
        <div class="vip_center">
            <a href="user_center.html">用户中心</a>
            <a href="#">商户中心</a>
            <a href="#">帮助</a>
        </div>
    </section>
</top>

<!--header-->
<div class="maxbj1">
    <header>
        <b class="logo"><img src="images/logo1.png"></b>
        <search>
            <div>
                <input type="text" placeholder="查询关键词..." required="" id="search_title"
                       style=" width:440px; height:30px; text-indent:2em; float:left; box-shadow:none">
                <button onclick="search()">搜索</button>
            </div>
        </search>
        <div class="sping_car">
            <b></b>
            <a href="Cart.html"><em>我的购物车</em></a>
        </div>
    </header>
</div>

<!--导航-->
<section class="dao_hang">
    <nav>
        <!--全部商品分类-->
        <div class="important"><img src="images/all_list.png" style=" padding-top:8px">&nbsp;全部商品分类
            <aside>
                <ul>
                    <li class="cates" mt-ct="list01" style="height: 40px">
                        <a href="goodsList.html"><h3>手机</h3></a>
                    </li>
                    <li class="cates" mt-ct="list02" style="height: 50px">
                        <h3>笔记本</h3>
                    </li>
                    <li class="cates" mt-ct="list03" style="height: 50px">
                        <h3>平板</h3>
                    </li>
                    <li class="cates" mt-ct="list04" style="height: 50px">
                        <h3>智能穿戴&VR</h3>
                    </li>
                    <li class="cates" mt-ct="list05" style="height: 50px">
                        <h3>智能家居</h3>
                    </li>
                    <li class="cates" mt-ct="list06" style="height: 50px">
                        <h3>智慧屏</h3>
                    </li>
                    <li class="cates" mt-ct="list07" style="height: 50px">
                        <h3>耳机音箱</h3>
                    </li>
                    <li class="cates" mt-ct="list08" style="height: 50px">
                        <h3>配件</h3>
                    </li>
                </ul>
            </aside>
            <div>
                <div class="import_list b-list01">
                    <dt>HUAWEI Mate系列：</dt>
                    <dd>
                        <a href="#">HUAWEI Mate 40</a>
                        <a href="#">HUAWEI Mate 40 Pro</a>
                        <a href="#">HUAWEI Mate Xs</a>
                        <a href="#">HUAWEI Mate 40 RS</a>
                    </dd>
                    <dt>HUAWEI P系列：</dt>
                    <dd>
                        <a href="#">HUAWEI P40</a>
                        <a href="#">HUAWEI P40 Pro+</a>
                        <a href="#">HUAWEI P40</a>
                    </dd>
                    <dt>HUAWEI nova系列：</dt>
                    <dd>
                        <a href="#">HUAWEI nova 8 SE</a>
                        <a href="#">HUAWEI nova 7 SE</a>
                        <a href="#">HUAWEI nova 7</a>
                        <a href="#">HUAWEI nova 7 Pro</a>
                    </dd>
                    <dt>荣耀V系列：</dt>
                    <dd>
                        <a href="#">荣耀V30</a>
                        <a href="#">荣耀V30 Pro</a>
                    </dd>
                    <dt>荣耀系列：</dt>
                    <dd>
                        <a href="#">荣耀20青春版</a>
                        <a href="#">荣耀30</a>
                        <a href="#">荣耀30 Pro</a>
                        <a href="#">荣耀30S</a>
                        <a href="#">荣耀30青春版</a>
                    </dd>
                </div>
                <div class="import_list b-list02">
                    <dt>华为MateBook X系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MateBook X 2020</a>
                        <a href="#">HUAWEI MateBook X Pro 2020</a>
                    </dd>
                    <dt>华为MateBook系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MateBook 14 2020</a>
                        <a href="#">HUAWEI MateBook 13 2020</a>
                    </dd>
                    <dt>荣耀猎人游戏本系列：</dt>
                    <dd>
                        <a href="#">荣耀猎人游戏本HONOR HUNTER V700</a>
                    </dd>
                    <dt>荣耀MagicBook Pro系列：</dt>
                    <dd>
                        <a href="#">荣耀笔记本Pro 2020新款</a>
                        <a href="#">荣耀笔记本15 2020</a>
                        <a href="#">荣耀笔记本14</a>
                    </dd>
                </div>
                <div class="import_list b-list03">
                    <dt>华为MatePad 系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MatePad Pro </a>
                        <a href="#">HUAWEI MatePad</a>
                    </dd>
                    <dt>荣耀 V系列：</dt>
                    <dd>
                        <a href="#">荣耀平板V6</a>
                    </dd>
                </div>
                <div class="import_list b-list04">
                    <dt>智能手表：</dt>
                    <dd>
                        <a href="#">HUAWEI WATCH GT 2 Pro ECG款 </a>
                        <a href="#">HUAWEI WATCH GT 2 保时捷设计款</a>
                        <a href="#">HUAWEI WATCH GT 2 运动款</a>
                        <a href="#">荣耀手表 GS Pro 运动款</a>
                        <a href="#">华为儿童手表 4X（映海蓝）</a>
                    </dd>
                    <dt>VR：</dt>
                    <dd>
                        <a href="#">NOLO CV1 Air VR定位交互套装</a>
                        <a href="#">HUAWEI VR Glass</a>
                        <a href="#">SPARKFOX VR健身控制器传感器套装</a>
                    </dd>
                    <dt>智能体脂秤：</dt>
                    <dd>
                        <a href="#">华为智能体脂秤 2 Pro</a>
                        <a href="#">荣耀智能体脂秤2</a>
                    </dd>
                    <dt>穿戴配件：</dt>
                    <dd>
                        <a href="#">STRAPBOX 复合表带 22mm</a>
                        <a href="#">HUAWEI EasyFit 氟橡胶表带</a>
                    </dd>
                </div>
                <div class="import_list b-list05">
                    <dt>智能路由：</dt>
                    <dd>
                        <a href="#">荣耀猎人路由</a>
                        <a href="#">华为子母路由 Q2 Pro</a>
                        <a href="#">荣耀分布式路由</a>
                    </dd>
                    <dt>移动路由：</dt>
                    <dd>
                        <a href="#">华为5G随行WiFi</a>
                        <a href="#">华为（HUAWEI）移动路由</a>
                    </dd>
                    <dt>HiLink生态：</dt>
                    <dd>
                        <a href="#"> 孩视宝智能面加环读写台灯 OG235B-AI</a>
                        <a href="#">艾沃 805-4家用净水器</a>
                        <a href="#">佑美家用静音折叠跑步机 F90H</a>
                        <a href="#">A.O.史密斯(A.O.Smith)零冷水热水器JSQ31-VJSX</a>
                    </dd>
                </div>
                <div class="import_list b-list06">
                    <dt>华为智慧屏：</dt>
                    <dd>
                        <a href="#">华为智慧屏X65</a>
                        <a href="#">华为智慧屏 V75</a>
                    </dd>
                    <dt>智慧屏配件：</dt>
                    <dd>
                        <a href="#">华为智慧屏直播精灵</a>
                        <a href="#">华为智慧屏触控遥控器</a>
                    </dd>
                </div>
                <div class="import_list b-list07">
                    <dt>智能音箱：</dt>
                    <dd>
                        <a href="#">HUAWEI Sound X 智能音箱</a>
                        <a href="#">HUAWEI Sound 智能音箱</a>
                    </dd>
                    <dt>真无线耳机：</dt>
                    <dd>
                        <a href="#">HUAWEI FreeBuds Pro</a>
                        <a href="#">HUAWEI FreeBuds Studio</a>
                    </dd>
                    <dt>智能眼镜：</dt>
                    <dd>
                        <a href="#">HUAWEI X GENTLE MONSTER Eyewear II</a>
                        <a href="#">HUAWEI X Gentle Monster Eyewear SMART MYMA-01</a>
                    </dd>
                </div>
                <div class="import_list b-list08">
                    <dt>充电器/线材：</dt>
                    <dd>
                        <a href="#">华为超级快充无线车充 CK030</a>
                        <a href="#">华为超级快充GaN双口充电器</a>
                    </dd>
                    <dt>移动电源：</dt>
                    <dd>
                        <a href="#">华为12000 66W SuperCharge多协议双向超级快充移动电源</a>
                        <a href="#">华为40W超级快充移动电源</a>
                    </dd>
                </div>
            </div>
        </div>
        <!--结束-->
        <div class="dao_list">
            <a href="index.html">首页</a>
            <a href="#">超级福包</a>
            <a href="#">母婴之家</a>
            <a href="#">厨房用品</a>
            <a href="#">生活必备</a>
            <a href="#">试吃申请</a>
            <a href="#">最新公告</a>
        </div>
    </nav>
</section>

<div class="container" id="dv_record_vue">
    <div class="row">
        <div class="col-md-12">
            <h2>交易记录</h2>
            <table id="table3" class="table table-bordered table-intel">
                <thead>
                <tr>
                    <th class="filter">创建时间</th>
                    <th class="filter">订单号</th>
                    <th class="no-sort no-filter">类型</th>
                    <th class="filter">金额</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="userRecord in resultList">
                    <td>{{userRecord.orderTime}}</td>
                    <td>{{userRecord.orderNumber}}</td>
                    <td>{{userRecord.operateType}}</td>
                    <td>{{userRecord.money}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-4">
            <div style="width:500px; margin: 0 auto">
                <nav aria-label="Page navigation">
                    <ul class="pagination">

                        <li :class="currentPage-1<1?'disabled':''">
                            <a href="javascript:void (0);" @click="getPageNumber(currentPage-1)" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li :class="currentPage===num?'active':''" v-for="num in pages">
                            <a :value="num" href="javascript:void (0);" @click="getPageNumber(num)"
                               :type="num">{{num}}</a>
                        </li>
                        <li :class="userRecordPb.hasPreviousPage===false?'disabled':''">
                            <a href="javascript:void (0);" @click="getPageNumber(currentPage+1)" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>

                        <span style="font-size: 18px;margin-left: 15px;">
                            共{{userRecordPb.total}}条记录,共{{userRecordPb.pages}}页
                        </span>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/excel-bootstrap-table-filter-bundle.js"></script>
<script type="text/javascript">

    $(function () {
        $('#table3').excelTableFilter({
            'captions': {a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择'}
        });
    });

    var record_vm = new Vue({
        el: "#dv_record_vue", //绑定的页面元素
        data: {
            //页面数据
            currentPage: 1, //当前页码
            pageSize: 10, //每页显示的数量
            userRecordPb: {}, //分页对象
            pages: [], //分页条页码
            resultList: [] //结果集中数据的长度是由pageSize决定的
        },
        methods: {
            getRecordPageBean: function (userInfo) {
                let url = "userAccount/findPageByUserId.do";
                let params = {
                    currentPage: this.currentPage, //当前页码
                    pageSize: this.pageSize, //每页显示的数量
                    userId: userInfo.userID
                };
                let vue_quote = this;
                getWithParams(url, params, function (data) {
                    vue_quote.resultList = data.list;
                    vue_quote.pages = data.navigatepageNums;
                    vue_quote.userRecordPb = data;
                    console.log("data=====");
                    console.log(data);
                })
            },
            getPageNumber: function (num) {
                console.log("num====");
                console.log(num);
                let userInfo = checkUserLogin();
                if (userInfo == null) {
                    return;
                }
                if (num < 1) {
                    num = 1;
                }
                record_vm.currentPage = num;
                //调用函数发起异步请求，查询用户记录
                record_vm.getRecordPageBean(userInfo);
            }
        }
    });

    /*************************页面加载*****************************/
    $(function () {
        //页面加载完毕，先判断用户是否已登录
        let userInfo = checkUserLogin();
        if (userInfo == null) {
            return;
        }
        //调用函数发起异步请求，查询用户记录
        record_vm.getRecordPageBean(userInfo);
    });

</script>
</body>
</html>
